<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <!-- 方法渲染 -->
      <table id="demoTable" lay-filter="demoTable"></table>
      <!-- 自动渲染 -->
      <table class="layui-table" lay-data="{height:315,url:'/json/table.json',page:true,id:'demoTable2' }">
        <thead>
          <tr>
            <th lay-data="{field: 'id', width: 80, sort: true}">ID</th>
            <th lay-data="{field: 'username', width: 80}">用户名</th>
            <th lay-data="{field: 'sex', width: 80, sort: true}">性别</th>
            <th lay-data="{field: 'city', width: 80}">城市</th>
          </tr>
        </thead>
      </table>
      <!-- 转换静态表格 -->
      <table lay-filter="demoTable3">
        <thead>
          <tr>
            <th lay-data="{field:'username', width:100}">昵称</th>
            <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
            <th lay-data="{field:'sign'}">签名</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>贤心1</td>
            <td>66</td>
            <td>人生就像是一场修行a</td>
          </tr>
          <tr>
            <td>贤心2</td>
            <td>88</td>
            <td>人生就像是一场修行b</td>
          </tr>
          <tr>
            <td>贤心3</td>
            <td>33</td>
            <td>人生就像是一场修行c</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["table"], function () {
        var table = layui.table;
        // 方法渲染
        table.render({
          // skin:"", // 静态表格里面的其他属性
          id: "demoTable", // 	设定容器唯一 id
          elem: "#demoTable", // 容器。传选择器
          // width:800, // number or  full-差值 2.1+
          height: 312, // number
          cellMinWidth: 60, // 全局定义所有常规单元格的最小宽度 默认60 优先级低于表头参数中的 minWidth
          url: "/json/table.json", // 接口地址
          // method:"POST", // 接口http请求类型，默认：get
          // where:{}, // {token: 'sasasas', id: 123}
          // contentType:"", //' application/json'
          // headers:{}, // {token: 'sasasas'}
          // 数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。
          // parseData: function (res) {
          //   return {
          //     code: res.status, //解析接口状态
          //     msg: res.message, //解析提示文本
          //     count: res.total, //解析数据长度
          //     data: res.data.item, //解析数据列表
          //   };
          // },
          // 用于对分页请求的参数：page、limit重新设定名称
          // request: {
          //   pageName: "curr", //页码的参数名称，默认：page
          //   limitName: "nums", //每页数据量的参数名，默认：limit
          // },
          // 重新设定返回的数据格式
          // response: {
          //   statusName: "status", //规定数据状态的字段名称，默认：code
          //   statusCode: 200, //规定成功的状态码，默认：0
          //   msgName: "hint", //规定状态信息的字段名称，默认：msg
          //   countName: "total", //规定数据总数的字段名称，默认：count
          //   dataName: "rows", //规定数据列表的字段名称，默认：data
          // },
          page: { theme: "#c00" }, // 是否开启分页 boolean object  支持 laypage 里所有参数
          // limit: 10, // 每页显示的条数 优先级低于 page 参数中的 limit 参数
          // limits:[10,20,30], // 每页条数的选择项 优先级低于 page 参数中的 limits 参数
          // loading: false, // 是否显示加载条（默认：true）
          title: "用户表", // 定义 table 的大标题（在文件导出等地方会用到) 2.4+
          cols: [
            // 表头 注意必须再套一层数组
            [
              /***
                   * field 字段名
                   * title 标题名
                   * width 若不填写，则自动分配；若填写，则支持值为：数字、百分比
                   * minWidth 最小宽度（默认：60)  优先级高于基础参数中的 cellMinWidth
                   * type  normal（常规列，无需设定）
                   *       checkbox（复选框列）
                           radio（单选框列，layui 2.4.0 新增）
                           numbers（序号列）
                           space（空列）
                   * LAY_CHECKED 是否全选状态（默认：false）。必须复选框列开启后才有效
                   * fixed 固定列。可选值有：left（固定在左）、right（固定在右）。
                   *      一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
                          注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。
                   * hide 是否初始隐藏列，默认：false。layui 2.4.0 新增
                   * totalRow 是否开启该列的自动合计功能 2.5.6+
                   * totalRowText 用于显示自定义的合计文本。layui 2.4.0 新增
                   * sort 是否允许排序（默认：false）
                   * unresize 是否禁用拖拽列宽（默认：false）。
                   *          默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。
                   *          而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
                   * edit 单元格编辑类型（默认不开启）目前只支持：text（输入框）
                   * event 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理
                   * style string 自定义单元格样式。即传入 CSS 样式
                   * align 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）
                   * colspan 单元格所占列数（默认：1）。一般用于多级表头
                   * rowspan 单元格所占行数（默认：1）。一般用于多级表头
                   * templet 自定义列模板，模板遵循 laytpl 语法。
                   * toolbar string 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮
                  */
              { field: "id", title: "ID", width: 80, sort: true, fixed: "left" },
              { field: "username", title: "用户名", width: 80 },
              { field: "sex", title: "性别", width: 80, sort: true },
              { field: "city", title: "城市", width: 80 },
              { checkbox: true },
              { fixed: "right", align: "center", toolbar: "#barDemo" }, //这里的toolbar值是模板元素的选择器
            ],
          ],
          // toolbar: "#toolbarDemo", //指向自定义工具栏模板选择器
          // toolbar: "<div>xxx</div>", //直接传入工具栏模板字符
          toolbar: true, //仅开启右侧工具栏，不显示左侧模板 过滤 导出excel 打印按钮
          // toolbar: "default", //让工具栏左侧显示默认的内置模板 + 编辑 删除 按钮
          // defaultToolbar:[], // 配置右侧工具栏按钮 默认 ["filter","exports","print"] 筛选 导出 打印。 也可自定义 { title: '提示'  ,layEvent: 'LAYTABLE_TIPS' //事件名 ,icon: 'layui-icon-tips' }
          // 渲染完毕的回调
          done: function (res, curr, count) {
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);

            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
          },
          // 数据请求失败的回调，返回两个参数：错误对象、内容layui 2.6.0 新增
          error: function (errobj, content) {},
          // data:[{}] , // 直接赋值数据。
          totalRow: true, // 是否开启合计行区域。layui 2.4.0 新增
          text: {
            none: "暂无相关数据", //默认：无数据。注：该属性为 layui 2.2.5 开始新增
          },
          // autoSort:true, //  默认 true，即直接由 table 组件在前端自动处理排序。若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 layui 2.4.4 新增
          initSort: {
            // 初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。
            field: "id", //排序字段，对应 cols 设定的各字段名
            type: "desc", //排序方式  asc: 升序、desc: 降序、null: 默认排序
          },
        });
        // demoTable 是 table 原始容器的属性 lay-filter="对应的值"
        table.on("tool(demoTable)", function (obj) {
          console.log(obj);

          // var data = obj.data; //获得当前行数据
          // var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          // var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
          layer.msg(obj.event + "--" + obj.data.username);

          //同步更新缓存对应的值
          obj.update({
            username: (Math.random() * 100).toFixed(1) + obj.data.username,
          });
        });

        // 转换静态表格 第一个参数传 lay-filter
        table.init("demoTable3", {
          height: 315,
        });

        //重载表格
        // var tableObj = table.render(options);
        // tableObj.reload(options);

        // table 上的静态方法 https://www.layui.com/doc/modules/table.html#method
        // > table.set(options); //设定全局默认参数。options即各项基础参数
        // > table.on('event(filter)', callback); //事件。event为内置事件名（详见下文），filter为容器lay-filter设定的值
        // > table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
        // > table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
        // > table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
        // > table.reload(id, options, deep); //表格重载
        // > table.resize(id); //重置表格尺寸
        // > table.exportFile(id, data, type); //导出数据
        // > table.getData(id); //用于获取表格当前页的所有行数据（layui 2.6.0 开始新增）

        // table.on 内置事件
        // 触发复选框选择
        table.on("checkbox(test)", function (obj) {
          console.log(obj.checked); //当前是否选中状态
          console.log(obj.data); //选中行的相关数据
          console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });
        // 触发单元格编辑
        table.on("edit(test)", function (obj) {
          //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
          console.log(obj.value); //得到修改后的值
          console.log(obj.field); //当前编辑的字段名
          console.log(obj.data); //所在行的所有相关数据
        });
        //触发行单击事件 2.4+
        table.on("row(test)", function (obj) {
          console.log(obj.tr); //得到当前行元素对象
          console.log(obj.data); //得到当前行数据
          //obj.del(); //删除当前行
          //obj.update(fields) //修改当前行数据
        });

        //触发行双击事件 2.4+
        table.on("rowDouble(test)", function (obj) {
          //obj 同上
        });

        //触发排序事件
        table.on("sort(test)", function (obj) {
          //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
          console.log(obj.field); //当前排序的字段名
          console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
          console.log(this); //当前排序的 th 对象

          //尽管我们的 table 自带排序功能，但并没有请求服务端。
          //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
          table.reload("idTest", {
            initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。
            where: {
              //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
              field: obj.field, //排序字段
              order: obj.type, //排序方式
            },
          });

          layer.msg("服务端排序。order by " + obj.field + " " + obj.type);
        });
      });
    </script>

    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

      <!-- 这里同样支持 laytpl 语法，如： -->
      {{# if(d.auth > 2){ }}
      <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
      {{# } }}
    </script>
  </body>
</html>
